<template>
  <u-upload ref="uUpload" :action="uploadServerUrl" :auto-upload="uploadValue.auto || false"
            :custom-btn="uploadValue.custom || false"
            :header="{
               'content-type':'application/json;charset=utf-8',
               'X-Access-Token': token
            }" :file-list="uploadValue.fileList" :show-progress="uploadValue.progress || false"
            @on-preview="preview"
            :max-count="uploadValue.count || 9"
            :width="uploadValue.width|| 150"
            :height="uploadValue.height||150"
            :deletable="uploadValue.deletable || true"
            :upload-text="uploadValue.uploadText || '请上传图片'"
            @on-choose-complete="choose" @on-remove="remove"
  ><view slot="addBtn"><slot></slot></view></u-upload>
</template>
<script>
import { mapGetters } from 'vuex'

export default {
  props:{
    uploadValue:{
      type:Object,
      default:()=>{}
    },
    //上传时携带的 header 数据
    header:{
      type:Object,
      default(){
        return {

        }
      }
    },
    //	字符串	添加照片	按钮文本
    btnName:{
      type:String,
      default:'添加图片',
    },
    //最多几张图片
    maxFileNumber:{
      type:Number,
      default:10
    }
  },
  data() {
    return {
      // 记录需要上传的图片数据
      needPploadedImgs : [],
      // 文本框输入内容记录
      textareaVal      : ' ',
      // 上传按钮名称
      subtxt           : "+ 发布",
      uploadServerUrl:this.$imageUrl
    }
  },
  computed:{
    ... mapGetters(['token'])
  },
  methods: {
    //每次选择图片后触发，只是让外部可以得知每次选择后，内部的文件列表
    choose(lists, name){
      this.$emit('chooseImg',lists,name)
    },
    //移除图片时触发
    remove(index, lists, name) {
      this.$emit('removeImg',index,lists,name)
    },
    //预览
    preview(url, lists, name){
      this.$emit('preive',url, lists, name)
    },
  }
}
</script>
<style scoped lang="scss">
image{
  height:100%
}
</style>
